<template>
	<view style="margin: 0 0rpx;background-color: white;">
		
		<!-- 上部分 -->
		<view class="flex_col" style="padding: 24rpx;">
			<view style="font-size: 28rpx;color: #36393E;" class="bold">地址与交通</view>
			<view class="flex_row" style="margin-top: 20rpx;">
				<text class="iconfont icon_location_grey" style="font-size: 26rpx;color: grey;"/>
				<view style="font-size: 24rpx;color: #161E22;margin-left: 4rpx;width:600rpx" class="single_line">{{store_detail.address.address}}</view>
			</view>
			<view style="height: 24rpx;"/>
			<view style="font-size: 28rpx;color: #36393E;" class="bold">直播环境</view>
			<view v-for="item,index in store_detail.room_list" :key="index" style="margin-top: 24rpx;">
				<live_room_item :live_room="item"/>
			</view>
		</view>
		<!-- 选择可排期时间 -->
		<view class="flex_col" style="padding:26rpx">
			<view style="font-size: 28rpx;color: #161E22;">选择可排期时间</view>
			<view class="flex_row">
				<view style="font-size: 20rpx;color: #FF3E3E;">选择可接受的直播场次，最多可选择4次</view>
				<view class="flex"/>
				<view style="font-size: 20rpx;color: #36393E;">已选{{total_count}}</view>
			</view>
		</view>
		<!-- 日期 -->
		<scroll-view :scroll-x="true" style="margin: 0 40rpx;">
			<view class="date_list"
				:style="'background-color:' + (dark?'#272f30':'white') + ';padding-top:' + (dark ? '22rpx' : '0rpx') + ';padding-bottom:' + (dark ? '8rpx' : '0rpx') + ';'">
				<view v-for="(item, index) in date_list" :key="index"
					:class="'weekDate ' + (item.value === selected_date.value? 'current': 'normal')" @tap="switchDay"
					:data-currentday="item">
					<view class="flex_col center relative"
						:style="{'border-radius':'4rpx','width':'80rpx','height':'80rpx','margin-right':'40rpx','margin-top':'20rpx', 'background-color':item.value === selected_date.value ? 'black' : 'white'}">
						<view v-if="item.count!=0" style="transform:translateY(-15rpx);"
							:class="'flex_row center item_count'">
							{{item.count}}</view>
						<view :class="item.value === selected_date.value ? 'selected_week' : 'unselected_week'">
							{{item.weekText}}
						</view>
						<view :class="item.value === selected_date.value ? 'selected_date' : 'unselected_date'">
							{{item.dayText}}
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 选择时间段 -->
		<view class="flex_row wrap center"
			style="padding:28rpx;padding-top:0;background-color: #FAFAFA;justify-content: space-between;">
			<view v-for="item,index in selected_date.timeslots" :key="index">
				<!-- 已经被预约 -->
				<view v-if="item.reserved" class="flex_col center time_unselected">
					<view style="font-size: 20rpx;color: #CFD1D6;">{{item.start_time + "-" + item.end_time }}</view>
					<view style="font-size: 20rpx;color: #CFD1D6;">已被预约</view>
				</view>
				<!-- 没有被预约 -->
				<view v-else @click="click_time(item,index)"
					:class="'flex_row center ' + (item.selected ? 'time_selected' : 'time_unselected')">
					{{item.start_time + "-" + item.end_time }}
				</view>
			</view>
		</view>
		<!-- 提交 -->
		<fl_btn text="确认提交"></fl_btn>
		<view style="height: 68rpx;"></view>
	</view>
</template>

<script>
	import live_room_item from "./items/live_room_item.vue"
	import fl_btn from "./fl_btn.vue"
	// component/weekday.js
	import {
		request
	} from "../api/request.js"

	const moment = require("../utils/moment.js");
	const dayToWeekDayMapping = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
	const weekDayEnglish = ["January", "February", "March", "April", "May", "June", "July", "August", "September",
		"October", "November", "December"
	]; // const weekDayEnglish = [
	export default {
		name: "weekday",
		data() {
			return {
				date_list: [],
				selected_date: null,
				monthText: null,
				monthEnglish: null,
				revervation_list: [], //时间表
				selected_revervation: {}, //选中的时间表
				selected_revervation_index: 0, //选中时间表的index
				store_detail:{
					
				},
				total_count:0,
			};
		},

		components: {
			fl_btn,
			live_room_item
		},
		props: {
			selectedDay: Object,
			dark: Boolean,
			store_code: {
				type: String
			},
		},
		beforeMount: function() {
			// this.loadDateList();
		},
		created() {
			this.getPlaceDetail()
			this.getPalletRevervation()
		},
		methods: {
			//点击时间
			click_time(item, index) {
				if(this.total_count == 4){
					this.showToast("最多选取4个时间段")
					return
				}
				if(item.selected){
					this.total_count--
				}else{
					this.total_count++
				}
				this.date_list[this.selected_revervation_index].timeslots[index].selected = !item.selected
				this.date_list[this.selected_revervation_index].count = this.date_list[this.selected_revervation_index]
					.timeslots.filter((e) => e.selected).length
				this.date_list = [].concat(this.date_list)
				this.selected_date = this.date_list[this.selected_revervation_index]
			},
			// 获取直播间时间表
			getPalletRevervation() {
				request({
					url: this.Api.GetPalletRevervation + this.store_code,
					method: "GET",
					data: {},
					success: (response) => {
						this.revervation_list = response
						this.process_data(response.data.dataset.data)
					},
					fail: () => {
						console.log("fail")
					},
					complete: () => {
						console.log("complete")
					},
				})
			},
			//获取直播地点详情
			getPlaceDetail() {
				request({
					url: this.Api.GetPalletPlace + this.store_code,
					method: "GET",
					data: {},
					success: (response) => {
						this.store_detail = response.data.dataset.data
						// console.log("直播间详情" + JSON.stringify(response))

					},
					fail: () => {
						console.log("fail")
					},
					complete: () => {
						console.log("complete")
					},
				})
			},
			process_data(datas) {
				for (var i = 0; i < datas.length; i++) {
					var item = datas[i]

					item.timeslots.forEach((e) => {
						e.end_time = moment(e.end_time).add("seconds", 1).format("HH:mm")
						e.start_time = moment(e.start_time).format("HH:mm")
						if (e.end_time == "00:00") {
							e.end_time = "24:00"
						}

						e.selected = false
					})
					let day = moment(item.date_id).format("DD")
					let week = dayToWeekDayMapping[moment(item.date_id).format("d")]; //周几
					item.selected = false
					item.count = 0
					this.date_list.push({
						index: i,
						// text: text,
						weekText: week,
						dayText: day,
						value: item.date_id,
						label: item.date_id,
						count: item.count == 0 ? "" : item.count,
						timeslots: item.timeslots,
					});
				}
				this.selected_date = this.date_list[0]
				console.log(this.date_list)


			},
			test() {
				console.log("test")
			},
			getSelectedDate() {
				return this.selected_date;
			},
			set_index: function() {
				this.selected_date = this.date_list[1]
			},

			switchDay: function(e) {
				console.log(e)
				this.selected_date = e.currentTarget.dataset.currentday
				this.selected_revervation_index = e.currentTarget.dataset.currentday.index

				this.$emit('weekdaychange', {
					detail: {
						date: e.currentTarget.dataset.currentday
					}
				});
			}
		}
	};
</script>
<style>
	.selected_week {
		color: white;
		font-size: 18rpx;
	}

	.unselected_week {
		color: #97989C;
		font-size: 18rpx;
	}

	.selected_date {
		color: white;
		font-size: 28rpx;
	}

	.unselected_date {
		color: #97989C;
		font-size: 28rpx;
		border-radius: 12rpx;
	}

	.weekDayClass {
		display: flex;
		flex-direction: column;
		background-color: #FFF;
		padding: 0rpx 28rpx 22rpx 28rpx;
		margin: 0rpx 20rpx;
		border-radius: 12rpx;
		box-shadow: 0 2px 8px 0 rgba(212, 212, 212, 0.8);
	}

	.date_list {
		display: flex;
		/* justify-content: space-around; */
		align-items: center;
	}

	.date_list .weekDate {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		/* padding: 0 22rpx 0 22rpx; */
	}

	.date_list .current {
		/* background-color: #2EC3B1;
  color: #FFF;
  border-radius: 6rpx; */
	}

	.date_list .current .weekText {
		font-size: 24rpx;
		color: #101010;
		font-weight: bold;
	}

	.date_list .current .dayText {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #272F30;
		font-size: 24rpx;

		font-weight: bold;
	}

	.date_list .normal .weekText {
		color: #101010;
		font-size: 24rpx;
	}

	.date_list .normal .dayText {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #9E9E9E;
		font-size: 24rpx;
	}

	.date_list .current .indicator {
		width: 52rpx;
		height: 4rpx;
		background-color: #2EC3B1;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
	}

	.date_list .normal .indicator {
		width: 52rpx;
		height: 4rpx;
		background-color: #fff;
	}

	.item_count {
		width: 20rpx;
		height: 20rpx;
		right: 0;
		top: 0;
		font-size: 16rpx;
		position: absolute;
		color: white;
		background-color: red;
		border-radius: 10rpx;
	}

	.time_selected {
		margin-top: 28rpx;
		background-color: white;
		width: 336rpx;
		height: 72rpx;
		border: solid 2rpx #00C2C4;
		border-radius: 2rpx;
		color: #00C2C4;
		font-size: 28rpx;
		box-shadow: 0 0 2rpx rgba(0, 0, 0, 0.1);
	}

	.time_unselected {
		margin-top: 28rpx;
		background-color: white;
		border-radius: 2rpx;
		width: 336rpx;
		height: 72rpx;
		border: solid 2rpx white;
		color: $black;
		font-size: 28rpx;
	}
</style>
